<template>
   <div>
      <el-card>
         <mytitle :showLine="false">{{ $route.meta.title }}</mytitle>
         <div class="card-box">
            <el-form :model="info" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
               <el-form-item label="姓名" prop="name" style="width: 320px;">
                  <el-input type="text"  v-model="info.name" placeholder="请输入姓名" />
               </el-form-item>
               <el-form-item label="手机号" prop="phone" style="width: 320px;">
                  <el-input type="text"  v-model="info.phone" placeholder="请输入手机号" />
               </el-form-item>
               <div></div>
               <el-form-item label="头像" style="width: 320px;">
                  <mysend :picUrl="info.headPortrait" @getUrl="getMypic" />
               </el-form-item>
               <el-form-item label="所属部门" prop="departmentId" style="width: 320px;">
                  <el-cascader v-loading="loading" v-model="valuse" @change="valusechange" :show-all-levels="false"
                      :options="options" @visible-change="varietyChange"
                     :props="{ checkStrictly: true, value: 'id', label: 'name' }" clearable></el-cascader>
               </el-form-item>
               <div></div>
               <el-form-item label="身份证" style="width: 320px;" prop="idNumber">
                  <el-input type="text"  v-model="info.idNumber" placeholder="请输入身份证" />
               </el-form-item>
               <el-form-item label="学历" style="width: 320px;">
                  <el-select v-model="info.education" placeholder="请选择学历" >
                     <el-option v-for="item in option" :key="item" :label="item" :value="item">
                     </el-option>
                  </el-select>
               </el-form-item>
               <el-form-item label="入职时间" style="width: 320px;">
                  <el-date-picker v-model="info.entryTime" type="datetime"  autofill="off" value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                     placeholder="选择日期时间">
                  </el-date-picker>
               </el-form-item>
               <div></div>
               <el-form-item label="" prop="state" style="width: 320px;">
                  <el-checkbox v-model="info.whetherOperator" :true-label="1" :false-label="0">是否作为操作端登录账号</el-checkbox>
               </el-form-item>
               <div></div>
               <el-form-item label="密码" autofill="off" style="width: 320px;" prop="password">
                  <el-input type="password"  v-model="info.password" placeholder="请输入密码" />
               </el-form-item>
               <el-form-item label="再次输入密码" autofill="off" style="width: 320px;" prop="resetPassword">
                  <el-input type="password"  v-model="info.resetPassword" @change="surePass" placeholder="请再次输入密码"  />
               </el-form-item>
               <div></div>
               <el-form-item>
                  <el-button @click="submitForm('ruleForm')" type="success" >确定</el-button>
                  <el-button @click="$router.go(-1)" type="success"  plain>返回</el-button>
               </el-form-item>
            </el-form>
         </div>
      </el-card>
   </div>
</template>
<script>
import { findUserdataByDepartmentId, addPcAccount } from '../util/api.js'

import { validateMobile } from '../util/config'
export default {
   data() {
      return {
         valuse: [],
         info: {
            name: '',
            phone: "",
            departmentId: "",
            headPortrait: "",
            password:"",
            idNumber: "",
            entryTime: "",
            education: "",
            whetherOperator: "",//是否可以作为登录账户0 1 
            resetPassword:"",
         },
         option: [
         '博士后','博士', '硕士', '研究生','本科', '专科', '高中', '初中','小学'
         ],
         pickerOptions: {
               disabledDate(time) {
                  return time.getTime() < Date.now() - 8.64e7;
             }
            },
         options: [],
         loading: false,
         rules: {
            name: [
               { required: true, message: '请输入姓名', trigger: 'blur' },
            ],
            phone: [
               { required: true, message: '请输入手机号', trigger: 'blur' },
               { validator: validateMobile.bind(this), trigger: 'blur' },
            ],
            password: [
               { required: true, message: '请输入密码', trigger: 'change' },
               { min: 6, max: 22, message: '长度在 6 到 22 个字符', trigger: 'blur' }
            ],
            idNumber: [
               { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号码格式不正确', trigger: 'blur' } 
            ],
            resetPassword:[
               { required: true, message: '请再次输入密码', trigger: 'blur' }
            ],
            departmentId:[
               { required: true, message: '请选择部门', trigger: 'change' }
            ]
         }
      }
   },
   mounted() {
   },
   methods: {
      async findUserdata() {
         this.loading = true
         let res = await findUserdataByDepartmentId({ departmentId: "1223456852" })
         // console.log(res)
         if (res.code != 200) return this.options = []
         this.options = res.data
         this.loading = false
      },
      varietyChange(val) {
         if (val) this.findUserdata()
      },
      getMypic(res) {
            if(res){
                this.info.headPortrait = res
            } 
        },
      valusechange(val) {
         // console.log(val)
         if (val.length == 0) {
            this.info.departmentId = ""
         } else {
            this.info.departmentId = val[val.length - 1]
         }
      },
      submitForm(formName) {
         this.$refs[formName].validate(async (valid) => {
            if (valid) {
               delete  this.info.resetPassword
               // console.log(this.info)
               let res = await addPcAccount(this.info)
               // console.log(res)
               if (res.code != 200) return
               this.$message.success('添加成功！')
               this.$router.push({path:"/staffManagement"})
            } else {
               // console.log('error submit!!');
               return false;
            }
         });
      },
      surePass(val){
           if(val!=this.info.password){
                this.$message.info('密码不一致')
                this.info.resetPassword=""
           } 
      }
   }
}
</script>
<style lang="less" scoped>
.card-box {
   width: 100%;
   height: 100%;

   .avatar {
      width: 146px;
      height: 146px;
      border-radius: 5px;
   }

   .demo-ruleForm {
      width: 100%;

      .el-form-item {
         display: inline-block;
      }
   }
}
/deep/.is-checked .el-checkbox__inner{
   background-color: #67C23A;
   border-color: #67C23A;
}
/deep/.is-checked .el-checkbox__label{
   color: #6F7174;
}

</style>